<template>
  <div id="ThreeContainer" ref="ThreeContainer"></div>
</template>

<script setup>
  import { onMounted, ref } from 'vue'
  import { useRouter } from 'vue-router'
  import * as THREE from 'three';
  import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"

  let router = useRouter()
  let three = {
    renderer: null,
    camera: null,
    scene: null,
    controls: null,
  };

  const initCT = () => {
    // 初始化three场景
    let ThreeContainer = document.getElementById("ThreeContainer");
    let fov = 45;
    let width = window.innerWidth;
    let height = window.innerHeight;
    let aspect = width / height;
    let near = 1;
    let far = 10 * 1000 * 1000;
    three.scene = new THREE.Scene();
    three.camera = new THREE.PerspectiveCamera(fov, aspect, near, far); //透视相机
    three.camera.position.y = 3
    three.camera.position.z = 10
    three.renderer = new THREE.WebGLRenderer({
      antialias: true,//抗锯齿
      // alpha: true, //透明度
      preserveDrawingBuffer: true, //保存绘图缓冲
    });
    three.renderer.setSize(window.innerWidth, window.innerHeight)
    three.renderer.shadowMap.enabled = true
    
    three.controls = new OrbitControls(three.camera, three.renderer.domElement)
    // // 添加轨道控制器
    // const controls = new OrbitControls(three.camera, three.renderer.domElement)
    // // 自动旋转 整体
    // controls.autoRotate = true;
    // controls.autoRotateSpeed = 0.5;
    // // 对轨道控制器改变时 监听
    // controls.addEventListener("change", () => {
    //   // renderer.render(scene, camera);
    // })

    // 添加背景图片
    const urls = [
      '/Cesium/Assets/Textures/SkyBox/tycho2t3_80_mx.jpg', '/Cesium/Assets/Textures/SkyBox/tycho2t3_80_my.jpg', '/Cesium/Assets/Textures/SkyBox/tycho2t3_80_mz.jpg', '/Cesium/Assets/Textures/SkyBox/tycho2t3_80_px.jpg', '/Cesium/Assets/Textures/SkyBox/tycho2t3_80_py.jpg', '/Cesium/Assets/Textures/SkyBox/tycho2t3_80_pz.jpg'
    ]
    three.scene.background = new THREE.CubeTextureLoader().load(urls)

    // 环境光
    const light = new THREE.AmbientLight(0xffffff, 1)
    three.scene.add(light)
    // // 创建地面
    // const meshfloor = new THREE.Mesh(
    //   new THREE.PlaneGeometry(100, 100),
    //   new THREE.MeshPhongMaterial({
    //     color: 0x1b5e20,
    //   })
    // )
    // meshfloor.rotation.x -= Math.PI / 2
    // // 地面接受光源
    // meshfloor.receiveShadow = true
    // three.scene.add(meshfloor)

    ThreeContainer.appendChild(three.renderer.domElement);
    
    window.three = three
  }

  onMounted(() => {
    initCT()
    window.addEventListener("resize", () => {
      // 更新摄像头
      three.camera.aspect = window.innerWidth / window.innerHeight;
      //   更新摄像机的投影矩阵
      three.camera.updateProjectionMatrix();
      //   更新渲染器
      three.renderer.setSize(window.innerWidth, window.innerHeight);
      //   设置渲染器的像素比
      three.renderer.setPixelRatio(window.devicePixelRatio);
    });
  })

</script>

<style scoped>
</style>
